<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item 
      icon="home-o" 
      to="/home"
      :class="{ 'active-tab': $route.path === '/home' }"
    >
      首页
    </van-tabbar-item>
    <van-tabbar-item 
      icon="user-o" 
      to="/personal-center"
      :class="{ 'active-tab': $route.path === '/personal-center' }"
    >
      个人中心
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const active = ref(0);

// 根据当前路由设置激活状态
watch(() => route.path, (newPath) => {
  if (newPath === '/home') {
    active.value = 0;
  } else if (newPath === '/personal-center') {
    active.value = 1;
  }
}, { immediate: true });
</script>

<style scoped>
:deep(.van-tabbar-item) {
  color: #666;
  font-size: 12px;
}

:deep(.van-tabbar-item--active) {
  color: #338aff;
}

:deep(.van-tabbar-item__icon) {
  font-size: 20px;
  margin-bottom: 2px;
}

:deep(.van-tabbar-item__text) {
  font-size: 12px;
}

.active-tab {
  color: #338aff !important;
}
</style> 